<template>
    <div>
        <Row class="formRow">
          <Col span="2" class="rightRow">
            <span class="ModelInputTitle">编号</span>
          </Col>
          <Col span="2" class="leftRow">
            <Input v-model="formInline.userCode" placeholder="编号" clearable style="width: 100%" size="large"></Input>
          </Col>
          <Col span="2" class="rightRow">
            <span class="ModelInputTitle">姓名</span>
          </Col>
          <Col span="2" class="leftRow">
            <Input v-model="formInline.userName" placeholder="姓名" clearable style="width: 100%" size="large"></Input>
          </Col>
          <Col span="2" class="rightRow">
           <span class="ModelInputTitle">手机号</span>
          </Col>
          <Col span="2" class="leftRow">
            <Input v-model="formInline.phone" placeholder="手机号" clearable style="width: 100%" size="large"></Input>
          </Col>
          <Col span="2" class="rightRow">
          <span class="ModelInputTitle">是否有效</span>
          </Col>
          <Col span="2" class="leftRow">
            <Select  size="large" style="width:100%" v-model="formInline.isYouxiao">
              <Option  value="1" >是</Option>
              <Option  value="0" >否</Option>
            </Select>
          </Col>
          <Col span="8" class="leftRow">
            <Button type="primary" @click="onSubmit">查询</Button>
            <Button type="primary" @click="resetForm('formInline')">重置</Button>
            <Button type="primary" @click="onAdd">添加</Button>
            <Button type="primary" @click="sendMessage">发送消息</Button>
          </Col>
        </Row>

      <Table :data="tableData" :columns="cloums" stripe :loading="loading" ref="table" :border="true" style="margin-top: 20px"  @on-selection-change="selectChange"></Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="total" :current="1" :placement="placement" @on-change="changePage" show-total show-elevator show-sizer @on-page-size-change="changeSize"></Page>
        </div>
      </div>


      <Modal
        v-model="edit"
        title="编辑"
        @on-ok="editok"
        @on-cancel="cancel('您取消了操作')" width="600">
        <Row>
          <Col span="12">   <span class="ModelInputTitle">编号</span><Input v-model="editForm.userCode" style="width: 200px" disabled></Input></Col>
          <Col span="12">   <span class="ModelInputTitle">名称</span><Input v-model="editForm.userName" style="width: 200px" disabled></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">昵称</span><Input v-model="editForm.nickName" style="width: 200px"></Input></Col>
          <Col span="12">   <span class="ModelInputTitle">手机号</span><Input v-model="editForm.phone" style="width: 200px"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">邮箱</span><Input v-model="editForm.email" style="width: 200px"></Input></Col>
          <Col span="12">   <span class="ModelInputTitle">是否有效</span> <Select   v-model="editForm.isYouxiao" style="width: 200px">
          <Option  value="1" >是</Option>
          <Option  value="0" >否</Option>
        </Select></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="24">   <span class="ModelInputTitle">备注</span><Input v-model="editForm.remark" type="textarea" style="width: 485px"></Input></Col>
        </Row>
      </Modal>

      <Modal
        v-model="add"
        title="添加"
        @on-ok="addok"
        @on-cancel="cancel('您取消了操作')" width="600">
       <Row>
         <Col span="12">   <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>名称</span><Input v-model="addUser.userName" style="width: 200px"></Input></Col>
         <Col span="12">   <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>密码</span><Input v-model="addUser.pwd" style="width: 200px"></Input></Col>
       </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">昵称</span><Input v-model="addUser.nickName" style="width: 200px"></Input></Col>
          <Col span="12">   <span class="ModelInputTitle">手机号</span><Input v-model="addUser.phone" style="width: 200px"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">邮箱</span><Input v-model="addUser.email" style="width: 200px"></Input></Col>
          <Col span="12">   <span class="ModelInputTitle">备注</span><Input v-model="addUser.remark" style="width: 200px"></Input></Col>
        </Row>
      </Modal>

      <Modal
        v-model="sendMeg"
        title="发送消息"
        @on-ok="sendMegok"
        @on-cancel="cancel('您取消了操作')" width="600">
        <Input v-model="sendMsgContent" type="textarea" :autosize="{minRows: 5,maxRows: 20}"></Input>
      </Modal>

      <Modal
        v-model="editPwd"
        title="修改密码"
        @on-ok="editPwdok"
        @on-cancel="cancel('您取消了操作')" width="600">
        <Row>
          <Col span="12">   <span class="ModelInputTitle">编号</span><Input v-model="editPwdForm.userCode" style="width: 200px" disabled></Input></Col>
          <Col span="12">   <span class="ModelInputTitle">名称</span><Input v-model="editPwdForm.userName" style="width: 200px" disabled></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>新密码</span><Input v-model="editPwdForm.newPwd" style="width: 200px"></Input></Col>
          <Col span="12">   <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>旧密码</span><Input v-model="editPwdForm.oldPwd" style="width: 200px"></Input></Col>
        </Row>
      </Modal>

      <Modal
        v-model="role"
        title="分配角色"
        @on-ok="roleok"
        @on-cancel="cancel('您取消了角色分配')" width="600" >
        <Transfer
          :data="roleData"
          :target-keys="roleData2"
          filterable
          :filter-method="filterMethod"
          @on-change="handleChange2" :titles="titleRole"></Transfer>
      </Modal>
      <Modal
        v-model="tips"
        title="提示"
        @on-ok="tipsok"
        @on-cancel="cancel('您取消了角色分配')">
        <p><Icon type="information-circled" color="blue" size="24" style="margin-right: 10px"></Icon>确定分配角色？</p>

      </Modal>
    </div>
</template>
<script type="text/ecmascript-6">
  import axios from  "axios"

    export default {
      name:"SysUserM",
        data() {
            return {
              formInline: {//查询条件
                userCode: '',
                userName: '',
                phone:'',
                isYouxiao:""
              },
              addUser:{
                userName: '',
                phone:'',
                pwd:"",
                nickName:"",
                email:"",
                remark:""
              },
              editForm:{
                userCode:"",
                userName:"",
                nickName:"",
                phone:"",
                email:"",
                isYouxiao:"",
                remark:"",
                id:""
              },
              editPwdForm:{
                id:"",
                userCode:"",
                userName:"",
                newPwd:"",
                oldPwd:""
              },
              roles:{
                userCode:"",
                userName:"",
                roleCodeArrayStr:""
              },//分配角色参数
              titleRole:["未分配角色","已分配角色"],
              roleData: [],//穿梭框数据
              roleData2: [],//右侧的穿梭框数据
              selectArr:[],//选择的数据
              total:0,//共多少条
              page:1,//页数
              size:10,//每页条数
              placement:"bottom",
              edit:false,//编辑模态
              add:false,//添加
              loading:true,//表格加载的图
              sendMeg:false,//发送消息
              editPwd:false,//修改密码
              role:false,//分配角色
              tips:false,//分配角色时确认
              single:"",
              sendMsgContent:"",//发送消息的内容
              tableData: [],//表格数据
              cloums: [
                {
                  type: 'selection',
                  width: 35,
                  align:"center"
                },
                {
                  title: '编号',
                  key: 'userCode',
                  width:100,
                  align:"center"
                },
                {
                  title: '名称',
                  key: 'userName',
                  width:120,
                  align:"center"
                },
                {
                  title: '昵称',
                  key: 'nickName',
                  width:120,
                  align:"center"
                },
                {
                  title: '手机号',
                  key: 'phone',
                  width:180,
                  align:"center"
                },
                {
                  title: '邮箱',
                  key: 'email',
                  width:240,
                  align:"center"
                },
                {
                  title: '是否有效',
                  key: 'valid',
                  width:100,
                  align:"center"
                },
                {
                  title: '备注',
                  key: 'remark',
                  width:200,
                  align:"center"
                },
                {
                  title: '创建人',
                  key: 'creator',
                  width:120,
                  align:"center"
                },
                {
                  title: '更新人',
                  key: 'updater',
                  align:"center"
                },
                {
                  title: '操作',
                  fixed: "right",
                  width:230,
                  align:"center",
                  render: (h, params) => {
                    return h('div', [
                      h('Button', {
                        props: {
                          type: 'primary',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px'
                        },
                        on: {
                          click: () => {
                            console.log(params.row)
                            this.edit = true;

                              this.editForm.userCode = params.row.userCode;
                              this.editForm.userName = params.row.userName;
                              this.editForm.nickName = params.row.nickName;
                              this.editForm.phone = params.row.phone;
                              this.editForm.email = params.row.email;
                              this.editForm.isYouxiao = params.row.valid=="是"?"1":"0";
                              this.editForm.remark = params.row.remark;
                              this.editForm.id = params.row.ids;

                          }
                        }
                      }, '编辑'),
                      h('Button', {
                        props: {
                          type: 'success',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px'
                        },
                        on: {
                          click: () => {
                            console.log(params.row)
                            this.editPwd = true;
                              this.editPwdForm.id = params.row.ids;
                              this.editPwdForm.userCode = params.row.userCode;
                              this.editPwdForm.userName = params.row.userName;
                          }
                        }
                      }, '修改密码'),
                      h('Button', {
                        props: {
                          type: 'error',
                          size: 'small'
                        },
                        on: {
                          click: () => {
                            var _this =this;
                            _this.roles.userName = params.row.userName;
                            _this.roles.userCode = params.row.userCode;
                            var qs = require('qs');
                            var param = qs.stringify({
                              userCode: params.row.userCode
                            })
                            _this.role = true;

                              axios.all([ axios.post("/role/selectUnAllotRoleCode",param),axios.post("/role/selectByUserCode",param)])
                                .then(axios.spread(function(acc,pers){
                                  //两个请求现在都完成
                                  _this.roleData = [];
                                  for(let i = 0;i<acc.data.data.length;i++){
                                    _this.roleData.push({
                                      key: acc.data.data[i].roleCode,
                                      label:acc.data.data[i].roleName
                                    })
                                  }
                                  _this.roleData2 = [];
                                  for(let i = 0;i<pers.data.data.length;i++){
                                    _this.roleData.push({
                                      key: pers.data.data[i].roleCode,
                                      label:pers.data.data[i].roleName
                                    })
                                    _this.roleData2.push(
                                      pers.data.data[i].roleCode
                                    )
                                  }
                                }));
                          }
                        }
                      }, '分配角色'),
                    ]);
                  }
                }
              ]
            }
        },
      mounted(){
        this.init();
      },
      methods:{
          init(page,pageSize,userCode,userName,phone,isYouxiao){
            var qs = require('qs');
            var params = qs.stringify({
              page:page?page:this.page,
              pageSize:pageSize?pageSize:this.size,
              userCode:userCode?userCode:"",
              userName:userName?userName:"",
              phone:phone?phone:"",
              valid:isYouxiao?isYouxiao:""
            });
            axios.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");

            axios.post("/user/querySysUserListByPage",params).then((res)=>{
             if(res.data.code=="000000"){
              console.log("添加成功");
               this.loading= true;
               var data=[];
               for(let i = 0;i<res.data.data.length;i++){
                 data.push({
                   userCode:res.data.data[i].userCode,
                   userName:res.data.data[i].userName,
                   nickName:res.data.data[i].nickName,
                   phone:res.data.data[i].phone,
                   email:res.data.data[i].email,
                   valid:res.data.data[i].valid==1?"是":"否",
                   remark:res.data.data[i].remark,
                   creator:res.data.data[i].creator,
                   updater:res.data.data[i].updater,
                    ids:res.data.data[i].id
                 })
               }
               this.tableData = data;
               this.loading= false;
               this.total = res.data.count;
             }else{
//               console.log(res.data.msg)
               this.$Notice.error({title:res.data.msg});
             }
            })
          },
//        重置查询条件
        resetForm() {
          this.formInline={
            userCode: '',
            userName: '',
            phone:'',
            isYouxiao:""
          };
          this.page = 1;
        },
//        查询确认
        onSubmit(){
            this.init(this.page,this.size,this.formInline.userCode,this.formInline.userName,this.formInline.phone,this.formInline.isYouxiao);
        },
//        添加
        onAdd(){
          this.add = true;
        },
//        发送消息
        sendMessage(){
          if(this.selectArr.length<=0){
            this.$Notice.error({title:"请至少选择一条数据"});
            return false;
          }else{
            this.sendMeg = true;
          }
        },
        cancel (msg) {
          this.$Notice.info({title:msg});
        },
//        添加确认
        addok(){
          if(this.addUser.userName==""){
            this.$Notice.error({title:'用户名不能为空'});
            return false;
          }
          if(this.addUser.pwd==""){
            this.$Notice.error({title:'密码不能为空'});
            return false;
          }
          var qs = require('qs');
          var params = qs.stringify({
            userName:this.addUser.userName,
            userPwd:this.addUser.pwd,
            nickName:this.addUser.nickName,
            phone:this.addUser.phone,
            email:this.addUser.email
          })
          axios.post("/user/addUser",params).then((res)=>{
//            console.log(res.data)
            if(res.data.code=="000000"){
              this.$Notice.success({title:'添加成功'});
              this.page = 1;
              this.size = 10;
              this.init();
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
        },
//        页码改变时
        changePage (page) {
          this.loading = true;
          this.page = page;
          this.init();
        },
//        数量改变时
        changeSize(size){
          this.placement = size>=20?"top":"bottom";
          this.loading = true;
          this.size = size;
          this.init();
        },
//选择CheckBox时
        selectChange(sel){
          this.selectArr = sel;
          console.log(sel)
        },
//        发送消息
        sendMegok(){
          if(this.sendMsgContent==""||this.sendMsgContent==null){
            this.$Notice.error({title:"请输入消息内容"});
            return false;
          }
          var ids  = "";
          for(let i=0;i<this.selectArr.length;i++){
             ids+=this.selectArr[i].ids+",";
          }
          var qs = require('qs');
          var params = qs.stringify({
            ids:ids,
            msgContent:this.sendMsgContent
          });
          axios.post("/msg/addBusMsgRecordBySysUser",params).then((res)=>{
//            console.log(res.data)
            if(res.data.code=="000000"){
              this.$Notice.success({title:"消息发送成功"});
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
        },
//        编辑确认
        editok(){
          var qs = require('qs');
          var param = qs.stringify({
            userName:this.editForm.userName,
            nickName:this.editForm.nickName,
            phone:this.editForm.phone,
            email:this.editForm.email,
            remark:this.editForm.remark,
            valid:this.editForm.isYouxiao,
            id:this.editForm.id
          })
          axios.post("/user/updateUser",param).then((res)=>{
            if(res.data.code=="000000"){
              this.$Notice.success({title:"保存成功"});
              this.init()
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
        },
//        修改密码
        editPwdok(){
          console.log("修改密码")
          console.log(this.editPwdForm.newPwd)
          if(this.editPwdForm.newPwd==""||this.editPwdForm.newPwd==null){
            console.log(this.editPwdForm.newPwd)
//            alert("密码不能为空")
            this.$Notice.error({title:"密码不能为空"});
            return false;
          }
          if(this.editPwdForm.oldPwd==""||this.editPwdForm.oldPwd==null){
            console.log(this.editPwdForm.oldPwd)
            this.$Notice.error({title:"密码不能为空"});
            return false;
          }

          var qs = require('qs');
          var param = qs.stringify({
            userNewPwd: this.editPwdForm.newPwd,
            userSecondPwd:this.editPwdForm.oldPwd,
            id:this.editPwdForm.id
          })
          console.log(param)
          axios.post("/user/updateUserPwd",param).then((res)=>{
            if(res.data.code=="000000"){
              this.$Notice.success({title:"密码修改成功"});
              this.init();
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
        },

        handleChange2 (newTargetKeys) {
          console.log(newTargetKeys);
          this.roleData2 = newTargetKeys;
        },
        filterMethod (data, query) {
          return data.label.indexOf(query) > -1;
        },

        roleok(){
          this.tips = true;
        },
        tipsok(){
          var roleCodeArrayStr = this.roleData2.join(",");
          console.log(roleCodeArrayStr);
          var qs = require('qs');
          var param = qs.stringify({
            userCode: this.roles.userCode,
            userName:this.roles.userName,
            roleCodeArrayStr:roleCodeArrayStr
          });
          axios.post("/role/grantSysRoleToUser",param).then((res)=>{
            console.log(res.data)
            if(res.data.code=="000000"){
              this.$Notice.success({title:"分配成功"});
              this.init();
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
        }
      }
    }
</script>

